.circle-container {
  position: relative;
  width: 160px;
  height: 160px;
  background-position: 0 -1362px;
}
.circle-container .right {
  position: absolute;
  width: 138px;
  height: 138px;
  top: 11px;
  left: 12px;
  transform: rotate(0deg);
  z-index: 11;
}
.circle-container .right .bg {
  width: 69px;
  height: 138px;
  position: absolute;
  top: 0px;
  right: 0px;
  background-position: 0 -1922px;
  background-position-x: -70px;
}
.circle-container .left {
  position: absolute;
  width: 138px;
  height: 138px;
  top: 11px;
  left: 12px;
  z-index: 11;
  transform: rotate(0deg);
}
.circle-container .left .bg {
  width: 69px;
  height: 138px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-position: 0 -1922px;
}
.circle-container .right-half {
  width: 80px;
  height: 140px;
  position: absolute;
  top: 11px;
  right: 0px;
  background-position: 0 -1642px;
  background-position-x: -69px;
  z-index: 20;
  display: none;
}
.circle-container .inner {
  width: 138px;
  height: 138px;
  position: absolute;
  top: 13px;
  left: 11px;
  z-index: 30;
}
.circle-container .level {
  margin: 24px auto 5px auto;
  display: block;
  width: 43px;
  height: 22px;
  background-position: 0 -1900px;
  display: none;
}
.circle-container .letter {
  margin: 38px auto 0 auto;
  display: block;
  width: 60px;
  height: 60px;
}
.circle-container .letter-s {
  background-position: 0 -2060px;
}
.circle-container .letter-a {
  background-position: 0 -1522px;
}
.circle-container .letter-b {
  background-position: 0 -1582px;
}
.circle-container .letter-c {
  background-position: 0 -1780px;
}
.circle-container .letter-d {
  background-position: 0 -1840px;
}
.circle-container .number {
  display: block;
  font-family: Arial;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  color: #b5eaff;
  width: 100px;
  margin: 35px auto;
  text-shadow: 0px 1px 3px #555555;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#64ccff), to(rgba(100, 204, 255, 0.5)));
}
.circle-container .text {
  text-align: center;
  margin-top: 170px;
  font-size: 12px;
}
.circle-container .percent {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #68afcc;
  font-family: Arial;
}
.circle-container .world {
  top: 175px;
  left: 72px;
}
.circle-container .cur {
  display: none;
}
.circle-container .cur-s {
  top: -20px;
  left: 64px;
}
.circle-container .cur-a {
  top: 45px;
  left: -30px;
}
.circle-container .cur-b {
  top: 140px;
  left: -10px;
}
.circle-container .cur-c {
  top: 140px;
  left: 145px;
}
.circle-container .cur-d {
  top: 45px;
  left: 165px;
}